import React, { useEffect } from "react";

import { useSelector, useDispatch } from "react-redux";
// useSelector: 从 store 中获取数据
// useDispatch: 向 store 发送 action

const List = () => {
  const list = useSelector((state) => state.list);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: "getListAction" });
    // eslint-disable-next-line
  }, []);

  const remove = (id) => () => {
    // console.log("remove");
    dispatch({ type: "removeAction", id: id });
  };

  return (
    <ul>
      {list.map((item, index) => (
        <li key={index}>
          {item.title} - <button onClick={remove(item._id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default List;
